<template>
    <div class="card-panel">
      <div class="icon-wrapper" @click="onClickedIcon">
        <svg-icon :iconClass="icon" ></svg-icon>
      </div>
      <div class="instruction">
        <div class="text">{{text}}</div>
        <div class="num">
          <count-to :startVal='0' :endVal='num' :duration='3000'></count-to>
        </div>
      </div>
    </div>
</template>

<script>
    import countTo from 'vue-count-to'
    export default {
        name: "card-panel",
        components:{countTo},
        props:{
          icon: {
            type: String,
            required: true
          },
          iconColor: {
            type: String,
            default: '#40c9c6'
          },
          iconHoverColor: {
            type: String,
            default: '#fff'
          },
          text: '',
          num: {
            type: Number,
            default: 0
          }
        },
        computed: {
          iconColorStyle: function () {

          }
        },
        methods:{
          onClickedIcon: function(){
            this.$emit("click")
          }
        }
    }
</script>

<style lang="scss" scoped>
  .card-panel{
    height: 108px;
    background: #fff;

    position: relative;
    .icon-wrapper{
      cursor: pointer;

      position: absolute;
      top: 10px;
      bottom: 10px;
      left: 10px;
      padding: 10px 20px;
      border-radius: 6px;

      font-size: 48px;
      line-height: 68px;

      transition: all  .5s ease;
    }

    .instruction{
      position: absolute;
      top: 29px;
      bottom: 29px;
      right: 20px;

      font-weight: bold;

      .text{
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        line-height: 18px;
        margin-bottom: 12px;
      }
      .num{
        font-size: 20px;
        line-height: 20px;
      }
    }
  }
</style>
